import axios from "axios";
import { useRef } from "react";
import { useEffect } from "react";
import {useState} from "react";
import PubSub from 'pubsub-js'

export default function Main() {
  /* 
  初始界面: 请输入关键字搜索    firstView: true  => 点击search发搜索请求变为false
  loading界面: 正在加载中...  loading: false   => 点击search发搜索请求变为true
  请求得到的用户列表界面: 遍历显示用户列表  users: [{用户名, 头像的url, 用户的url}, {}]
  请求失败界面: 错误提示信息   errorMsg: ''
   */
  const [firstView, setFirstView] = useState(true)
  const [loading, setLoading] = useState(false)
  const [users, setUsers] = useState([])
  const [errorMsg, setErrorMsg] = useState('')

  // 初始化时订阅消息
  useEffect(() => {
    PubSub.subscribe('search', async (msgName, data) => { // data就是传递过来的搜索关键字
      // 发请求前, 更新为请求中状态
      setFirstView(false)
      setLoading(true)
      try {
        // 发请求获取数据  不能带: http://localhost:4000
        const response = await axios.get('/search/users', {params: {q: data}})
        const result = response.data
        // 请求成功后, 更新为成功状态
        setLoading(false)
        setUsers(result.items) // 指定用户列表
      } catch (error) {
        // 请求失败了, 更新为失败状态
        setLoading(false)
        setErrorMsg('请求失败: ' + error.message)
      }
    })

    // 取消订阅
    return () => {
      PubSub.unsubscribe('search')
    }
  }, [])

  // 根据state数据进行多条件渲染
  if (firstView) {
    return <h2>请输入关键字搜索:</h2>
  } else if (loading) {
    return <h2>正在加载中...</h2>
  } else if (errorMsg) {
    return <h2>{errorMsg}</h2>
  }

  // useEffect不能在这里执行, 有可能不会执行

  return (
    <div className="row">
      {
        users.map(user => (
          <div className="card" key={user.id}>
            <a href={user.html_url} target="_blank" rel="noreferrer">
              <img
                src={user.avatar_url}
                alt=""
                style={{ width: 100 }}
              />
            </a>
            <p className="card-text">{user.login}</p>
          </div>
        ))
      }
    </div>
  );
}
